import React from "react"
import { Image } from "react-native"
import routesMaps from "../../navigation/routes"
import { images } from "@/assets"
import { px2dp } from "@/utils"
import { color } from "@/theme"
import TabNavigator from "./react-native-tab-navigator"
import { CollectionScreen, EventScreen, HomeScreen, MineScreen, RollingBallScreen } from "@/screens"
import { inject, observer } from "mobx-react"

interface MainProps {
  history?: any
  routes?: any
  rootStore: any
}

@inject("rootStore")
@observer
class MainScreen extends React.Component<MainProps, {}> {
  // @ts-ignore
  mainRoutes = routesMaps[routesMaps.length - 1].routes
  state = {
    currentIndex: 0
  }

  render() {
    return (
      <TabNavigator
        style={{ marginBottom: px2dp(8), backgroundColor: color.transparent }}
        tabBarShadowStyle={{ backgroundColor: color.transparent }}
      >
        <TabNavigator.Item
          selected={this.state.currentIndex === 0}
          title="首页"
          renderIcon={() => <Image source={images.tabBar.icons.home} />}
          renderSelectedIcon={() => <Image source={images.tabBar.icons.homeSelect} />}
          onPress={() => this.setState({ currentIndex: 0 })}
        >
          <HomeScreen rootStore={this.props.rootStore} />
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.currentIndex === 1}
          title="赛事"
          renderIcon={() => <Image source={images.tabBar.icons.event} />}
          renderSelectedIcon={() => <Image source={images.tabBar.icons.eventSelect} />}
          onPress={() => this.setState({ currentIndex: 1 })}
        >
          <EventScreen rootStore={this.props.rootStore} />
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.currentIndex === 2}
          renderIcon={() => (
            <Image
              style={{ height: px2dp(50), width: px2dp(50) }}
              source={images.tabBar.icons.rollingBallSelect}
            />
          )}
          renderSelectedIcon={() => (
            <Image
              style={{ height: px2dp(50), width: px2dp(50) }}
              source={images.tabBar.icons.rollingBall}
            />
          )}
          onPress={() => this.setState({ currentIndex: 2 })}
        >
          <RollingBallScreen />
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.currentIndex === 3}
          title="收藏"
          renderIcon={() => <Image source={images.tabBar.icons.collection} />}
          renderSelectedIcon={() => <Image source={images.tabBar.icons.collectionSelect} />}
          onPress={() => this.setState({ currentIndex: 3 })}
        >
          <CollectionScreen />
        </TabNavigator.Item>
        <TabNavigator.Item
          selected={this.state.currentIndex === 4}
          title="我的"
          renderIcon={() => <Image source={images.tabBar.icons.mine} />}
          renderSelectedIcon={() => <Image source={images.tabBar.icons.mineSelect} />}
          onPress={() => this.setState({ currentIndex: 4 })}
        >
          <MineScreen rootStore={this.props.rootStore} />
        </TabNavigator.Item>
      </TabNavigator>
    )
  }
}

export default MainScreen
